import React, {Component} from 'react';
import {View, StyleSheet, Text, Image, ScrollView} from 'react-native';
import {Flex, WingBlank, List, Tabs} from '@ant-design/react-native';
import {getParkingOrderList} from '~/api/company';
import moment from 'moment';

const renderContent = (tab, index) => {
    const style = {
        paddingVertical: 40,
        justifyContent: 'center',
        alignItems: 'center',
        margin: 10,
        backgroundColor: '#ddd',
    };
};

class listviews extends Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [],
            tabs: [
                {title: '全部订单', value: 'all'},
                {title: '已认购', value: 1},
                {title: '待付定金', value: 2},
                {title: '已签合同', value: 3},
                {title: '购买成功', value: 4},
            ],
            queryCondidate: {
                page_index: 1,
                page_size: 10,
                condidate: {
                    tabkey: 'all',
                },
            },
            itemimage: 'url图片地址',
        };
        this.TabClick = this.TabClick.bind(this);
        this.GetList = this.GetList.bind(this);
    }

    TabClick(tab) {
        let temp = this.state.queryCondidate;
        temp.condidate.tabkey = tab.value === 'all' ? 'all' : tab.value;
        this.setState(
            {
                queryCondidate: temp,
            },
            () => {
                this.GetList();
            },
        );
    }

    GetList() {
        getParkingOrderList(this.state.queryCondidate).then((r) => {
            console.log(r.data);
            console.log(12121);
            if (r.code === 0) {
                this.setState({
                    list: r.data.list,
                });
            }
        });
    }

    render() {
        return (
            <Flex style={{flex: 1}}>
                <Tabs
                    tabs={this.state.tabs}
                    prerenderingSiblingsNumber={0}
                    onChange={this.TabClick}>
                    <ScrollView>
                        {this.state.list.map((item) => {
                            return (
                                <Flex
                                    direction={'column'}
                                    style={styles.itflex}>
                                    <Flex
                                        justify={'between'}
                                        style={styles.flex}>
                                        <Text style={styles.texttop}>
                                            时间：
                                            {moment().format(
                                                'YYYY-MM-DD HH:mm',
                                                item.RegDateTime,
                                            )}
                                        </Text>
                                        <Text style={styles.texttop2}>
                                            已认购
                                        </Text>
                                    </Flex>
                                    <View style={styles.textfenge} />
                                    <Flex style={styles.textcen}>
                                        <Flex>
                                            <Image
                                                style={{
                                                    width: 90,
                                                    height: 90,
                                                }}
                                                source={require('~/assets/public/tu1.12x.png')}
                                            />
                                        </Flex>
                                        <WingBlank>
                                            <Flex
                                                direction={'column'}
                                                align={'start'}>
                                                <Flex>
                                                    <Text
                                                        numberOfLines={1}
                                                        style={styles.textcen1}>
                                                        {item.BuildingName}
                                                    </Text>
                                                </Flex>
                                                <Flex>
                                                    <Text
                                                        style={{
                                                            paddingRight: 10,
                                                        }}>
                                                        {item.AreaName}
                                                    </Text>
                                                    <Text
                                                        style={{
                                                            fontSize: 16,
                                                            paddingRight: 10,
                                                        }}>
                                                        {item.ParkingName}
                                                    </Text>
                                                </Flex>
                                                <Flex>
                                                    <Text
                                                        style={styles.fonttext}>
                                                        {item.CompanyName}
                                                    </Text>
                                                </Flex>
                                                <Flex>
                                                    <Text
                                                        style={styles.fonttext}>
                                                        建筑面积：
                                                        {item.AreaBuilt}
                                                    </Text>
                                                    <Text
                                                        style={styles.fonttext}>
                                                        使用面积:
                                                        {item.AreaInner}
                                                    </Text>
                                                </Flex>
                                                <Flex>
                                                    <Text
                                                        style={styles.fonttext}>
                                                        全款，套餐十，70000现金券，十人抽一台汽车
                                                    </Text>
                                                </Flex>
                                            </Flex>
                                        </WingBlank>
                                    </Flex>
                                    <View style={styles.textfenge} />
                                    <Flex
                                        style={styles.textbuttom}
                                        justify={'between'}>
                                        <Text style={{width: '60%'}}>
                                            总计：
                                            <Text style={styles.textbuttom2}>
                                                ￥ {item.PriceMarket}元
                                            </Text>
                                        </Text>

                                        <Text style={styles.textbuttom3}>
                                            取消认购
                                        </Text>
                                        <Text style={styles.textbuttom4}>
                                            取消认购
                                        </Text>
                                    </Flex>
                                </Flex>
                            );
                        })}
                    </ScrollView>
                </Tabs>
            </Flex>
        );
    }
}
export default listviews;
export const title = 'Tabs';
export const description = 'Tabs example';

const styles = StyleSheet.create({
    itflex: {
        marginTop: 10,
        backgroundColor: '#FFFFFF',
    },
    flex: {
        height: 43,
        width: '100%',
        paddingLeft: '5%',
        paddingRight: '5%',
    },
    texttop: {
        fontSize: 14,
        color: '#666666',
    },
    texttop2: {
        color: '#FF3733',
        fontSize: 14,
        fontWeight: 'bold',
    },
    textcen: {
        width: '100%',
        paddingLeft: 15,
        paddingTop: 10,
        paddingBottom: 10,
    },
    textcen1: {
        fontSize: 14,
        fontWeight: 'bold',
        paddingRight: 10,
    },
    fonttext: {
        fontSize: 12,
        color: '#666666',
    },
    textbuttom: {
        width: '100%',
        height: 55,
        borderBottomWidth: 0.2,
        paddingLeft: '5%',
        paddingRight: '5%',
    },
    textbuttom2: {
        color: '#FF3733',
        fontWeight: 'bold',
        fontSize: 15,
    },
    textbuttom3: {
        fontSize: 12,
        width: 70,
        height: 25,
        borderRadius: 12,
        textAlign: 'center',
        borderWidth: 0.2,
        paddingTop: 4,
    },
    textbuttom4: {
        fontSize: 12,
        width: 70,
        height: 25,
        borderRadius: 12,
        backgroundColor: '#FF3733',
        color: '#FFFFFF',
        textAlign: 'center',
        paddingTop: 4,
    },
    textfenge: {
        width: '100%',
        backgroundColor: '#F6F6F6',
        height: 2,
    },
});
